<template>
  <div class="chat" v-if="show">
    <div class="head" @mousedown="handlerMouseDown">
      <div class="info-box" @mousedown.stop>
        <img class="photo" src="" alt="">
        <h3 class="nikename">{{user.name}}
          <small>主营：3099，699</small>
        </h3>
        <p class="intro">
          {{user.intro}}</p>
      </div>
      <div class="control" @mousedown.stop>
        <!--<Icon class="min" type="minus" @click="show=false"></Icon>-->
        <div @click="close">
          <Icon class="close" type="close"></Icon>
        </div>
      </div>
    </div>
    <chatContent></chatContent>
    <div class="foot">
      <div class="tool-bar">
        <Upload style="display: inline-block" action="//jsonplaceholder.typicode.com/posts/" :show-upload-list="false">
          <Icon class="tool-item" type="image"></Icon>
        </Upload>
        <Icon class="tool-item" type="chatboxes"></Icon>
      </div>
      <div class="input">
        <textarea class="send-content" v-model.trim="input" @keyup.enter="send" placeholder="按Enter键发送消息">
        </textarea>
      </div>
      <div class="send-bar">
        <Button type="primary" size="small" @click="send">
          <Icon type="paper-airplane"></Icon>
          发送消息
        </Button>
      </div>
    </div>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex'
  import chatContent from './chat-content'
  export default {
    name: 'chat',
    data () {
      return {
        input: '',
        pos: {x: 0, y: 0}
      }
    },
    computed: {
      // 使用对象展开运算符将 getters 混入 computed 对象中
      ...mapGetters({
        show: 'GET_WINDOW_STATUS',
        user: 'GET_USER_INFO'
      })
    },
    components: {chatContent},
    methods: {
      send: function () {
        if (this.input) {
          this.$emit('send', this.input)
          this.$store.commit('ADD_MESSAGE', {
            time: new Date().toLocaleString(),
            text: this.input,
            self: true
          })
          this.input = ''
        }
      },
      close: function () {
        console.log(this.users)
        this.$store.commit('CLOSE_WINDOW', this)
      },
      handlerMouseDown: function (e) {
        this.x = e.clientX - e.target.offsetParent.offsetLeft
        this.y = e.clientY - e.target.offsetParent.offsetTop
        this.$root.$el.addEventListener('mousemove', this.handlerMouseMove)
      },
      handlerMouseMove: function (e) {
        this.$el.style.marginTop = -this.y + 'px'
        this.$el.style.marginLeft = -this.x + 'px'
        this.$el.style.top = e.clientY + 'px'
        this.$el.style.left = e.clientX + 'px'
        this.$root.$el.addEventListener('mouseup', this.handlerMouseUp)
      },
      handlerMouseUp: function (e) {
        this.$root.$el.removeEventListener('mousemove', this.handlerMouseMove)
        this.$root.$el.removeEventListener('mouseup', this.handlerMouseUp)
      }
    },
    mounted () {

    },
    created () {

    }
  }
</script>

<style scoped lang="less">
  .chat {
    height: 500px;
    width: 600px;
    background-color: #e4e4e4;
    position: absolute;
    padding: 5px;
    border-radius: 3px;
    box-shadow: 0 0 10px #999;
    top: 50%;
    margin-top: -250px;
    left: 50%;
    margin-left: -300px;
    z-index: 999;
  }

  .head {
    height: 80px;
    background-color: #e2e2e2;
    position: relative;
    cursor: move;
    .info-box {
      cursor: default;
      position: relative;
      & > * {
        position: absolute;
      }
      .photo {
        top: 6px;
        width: 60px;
        height: 60px;
        background-color: brown;
      }
      .nikename {
        left: 70px;
        top: 6px;
      }
      .intro {
        left: 70px;
        top: 28px;
        width: 320px;
        height: 36px;
        overflow: hidden;
      }
    }
    .control {
      cursor: default;
      position: absolute;
      right: 0;
      font-size: 16px;
      & > div > * {
        margin: 0 5px;
      }
      & > div > *:hover {
        color: #5cadff;
      }
    }
  }

  .foot {
    height: 130px;
    background-color: white;

    .tool-bar {
      height: 30px;
      background-color: #e2e2e2;
      box-shadow: 0 10px 0;
      .tool-item {
        font-size: 24px;
        color: #aaa;
        padding: 3px;
        cursor: pointer;
      }
      .tool-item:hover {
        font-size: 26px;
        color: #5cadff;
        padding: 2px;
      }
    }
    .input {
      height: 70px;
      .send-content {
        width: 100%;
        height: 100%;
        resize: none;
        padding: 5px;
        font-size: 14px;
        box-sizing: border-box;
        border: 1px solid #ddd;

      }
    }
    .send-bar {
      padding: 6px 1px;
      text-align: right;
      background-color: #e2e2e2;
    }
  }

</style>
